<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>后台登录 - 红高粱</title>
<%@ include file="/WEB-INF/jsp/common/res.jsp" %>
<style type="text/css">
.bg{width:800px;height:300px;background-color:#004EA3;margin: 0 auto;position: relative;border:2px solid #ccc;}
.login{width: 340px;height:340px;background-color:#ffffff;right: 20px;position:absolute;top:-35px;border:2px solid #ccc;padding: 10px;}
.login p{margin:35px 0;}
.logo{width:400px;height: 300px;}
.logo img{margin-top:80px;margin-left: 28px;}
h3{border-bottom: 1px dotted;color: #666;line-height:30px;}
.ts{color: #666; width:56px; text-align:right}
.login_input{width:201px;height: 23px;padding-left:25px;border:1px solid #DBDBDB;}
.login_input2{width:80px;height: 23px;border:1px solid #DBDBDB;}
.msg{margin: 0 auto;margin-top:10px;padding:5px;color:red;}
.login .code{ float:left; margin:0 5px 0 0;}
.change_txt a{font:normal 12px "宋体";color:#0088c1;}
#kaptchaImage{ margin:0px 0 0 0;float:left; width:80px;}
#change{ line-height:40px;}
#name{background: url("images/login_name.jpg") no-repeat 5px 3px; }
#pwd{background: url("images/login_pwd.jpg") no-repeat 5px 3px; }
</style>
<script type="text/javascript">
$(function(){
	var h = $(window).height()/2;
	$(".bg").css("margin-top",h-170+"px");
	
	$(document).keypress(function(e){  
	    switch(e.which)  
	    {  
	        case 13:login();
	        		break;    
	    }
	});
	
 	$('#kaptchaImage').click(function () {//生成验证码
   		$(this).hide().attr('src', './kaptcha/getKaptchaImage?' + Math.floor(Math.random()*100) ).fadeIn();
   	 	event.cancelBubble=true;
    });
});
</script>
</head>
<body>
<div class="bg">
	<div class="logo">
		<img src="images/logo.png" />
	</div>
	<div class="login">
		<h3>管理员登录</h3>
		<div style="margin: 0 auto;width: 315px;margin-top: 10px;">
			<p>
				<span class="ts">账  &nbsp&nbsp&nbsp号：</span>
				<input type="text" id="name" class="login_input" title="请输入账号:" />
			</p>		
			<p>
				<span class="ts">密 &nbsp&nbsp&nbsp码：</span>
				<input type="password" id="pwd" title="请输入密码:" class="login_input" />
			</p>			
			<div>
				<div class="code">
					<span class="ts">验证码 ：</span>
					<input type="text" id="kaptcha" class="login_input2"  title="请输入验证码:" />
				</div>				
					<img src="./kaptcha/getKaptchaImage" id="kaptchaImage" />
					<span class="change_txt"><a href="#" onclick="changeCode()" id="change">看不清?换一张</a></span>					
			</div>
				<div style="text-align:center; margin:0; height:50px;line-height: 50px;">
					<span class="msg"></span>
				</div>			
				<p style="text-align:center; margin:0;">
					<a href="javascript:login();" class="btn">登 录</a>
				</p>
		</div>
		
	</div>
</div>
<script type="text/javascript">
/**
 * 登录
 */
function login()
{

	var userName = $("#name").val();
	var pwd  = $("#pwd").val();
	var kaptcha  = $("#kaptcha").val();
	if(userName.length <= 0)
	{
		$(".msg").html("用户名不能为空!");
		return;
	}
	else if(pwd.length <= 0){
		$(".msg").html("密码不能为空!");
		return;
	}
	else if(kaptcha.length <= 0){
		$(".msg").html("验证码不能为空!");
		return;
	}
	
	$(".login_btn").css("background-color","#ccc").attr("href","javascript:void(0);");
	$(".msg").html("登录中......");
	$.ajax({
		url:"${pageContext.request.contextPath}/loginValid",
		type:"POST",
		data:{loginId:userName,loginPwd:pwd,kaptcha:kaptcha},
		dataType:"json",
		success:function(data){
			if(data.status =='ok'){
				$(".msg").html(data.msg);
				location.href = "${pageContext.request.contextPath}/order/query";
			}else{
				$(".msg").html(data.msg);
				$(".login_btn").css("background-color","#004EA3").attr("href","javascript:login();");
			}
		},
		error:function(){
			$(".msg").html("连接失败, 请重试!");
			$(".login_btn").css("background-color","#004EA3").attr("href","javascript:login();");
		}
	});
}

function changeCode() {
	$('#kaptchaImage').hide().attr('src', './kaptcha/getKaptchaImage?' + Math.floor(Math.random()*100) ).fadeIn();
	event.cancelBubble=true;
}
</script>
</body>
</html>